<template>
    <view class="content" :style="{ backgroundImage: `url(${site_config.front_background})` }" v-if="site_config">
        <status-bar title=" " hideBg="1" statusHeight backColor :back="back"></status-bar>
        <!-- <image :src="$imgUrls(shiftImg)" class="shiftImg"></image> -->
        <view class="Box" :style="{ backgroundImage: `url(${site_config.front_background_outer})` }">
            <scroll-view scroll-y="true" class="scrollView" @scroll="Scroll" :style="{ height: bgImgHeight + 'rpx' }">
                <movable-area class="movable-area" :style="{ height: bgImgHeight + 'rpx' }" :scale-area="true">
                    <movable-view class="movable-view" :out-of-bounds="false" direction="all" :scale="true" :scale-min="1" :scale-value="scaleValue" :disabled="Disabled" @scale="scaleView">
                        <view
                            class="list"
                            v-for="(item, index) in site_location"
                            :key="index"
                            :style="{ width: item.width + 'rpx', height: item.height + 'rpx', left: item.x + 'rpx', top: item.y + 'rpx' }"
                            @click="selectTab(item)"
                        >
                            <image :src="$imgUrls(item.choose_log)" class="list_img" v-if="item.select == 1"></image>
                            <block v-else>
                                <image :src="$imgUrls(item.empty_log)" class="list_img" v-if="item.order_state == 0 || item.order_state == 2"></image>
                                <image :src="$imgUrls(item.order_log)" class="list_img" v-if="item.order_state == 1"></image>
                            </block>
                        </view>

                        <image :src="$imgUrls(site_config.background)" mode="widthFix" class="rows"></image>
                    </movable-view>
                </movable-area>
            </scroll-view>

            <!-- 	<view class="box_Tip">
				<view class="type_config" v-for="(item, index) in type_config" :key="item.id">
					<image :src="$imgUrls(item.empty_log)" class="type_config_log"></image>
					<text class="type_config_name">{{ item.type_name }}</text>
				</view>
			</view> -->
        </view>

        <view class="footer">
            <view class="details">
                <view class="d-flex a-center">
                    <text class="details_txt">{{ details.open_date }}</text>
                    <text class="open_time details_txt">{{ details.open_time }}</text>
                    <text class="details_txt">{{ details.name }}</text>
                </view>
                <view class="d-flex a-center m-top10">
                    <text class="details_txt">预约妆造 余位：</text>
                    <text class="details_txt">{{ details.make_up_num }}/{{ details.make_up_num_total }}</text>
                </view>
            </view>

            <scroll-view scroll-x="true" class="rows nowrap m-top14" v-if="selectArr.length">
                <view class="tableList" v-for="(item, index) in selectArr" :key="index">
                    <text class="tableList_name">{{ item.type_name }}-{{ item.name }}</text>
                    <view class="black h7 m-top4">￥{{ item.site_price }}</view>
                </view>
            </scroll-view>

            <view class="Givemoney" v-if="selectArr.length">
                <view class="MoneyBox">
                    <view class="d-flex a-center">
                        <text class="Earnest">定金</text>
                        <text class="EarnestMoney">￥{{ priceObj.order_price }}</text>
                    </view>
                    <view class="d-flex a-center">
                        <text class="Copewith">应付金额</text>
                        <text class="CopewithMoney">￥{{ priceObj.site_price }}</text>
                    </view>
                </view>
                <view class="continum" @click="chooseSite">确认并支付定金</view>
            </view>

            <view class="Make_btn" v-else>请选择座席</view>
        </view>

        <u-modal
            :show="show"
            title="温馨提示"
            :content="site_config.tel_desc"
            :closeOnClickOverlay="true"
            confirmText="立即联系"
            confirmColor="#e0bb71"
            @close="show = false"
            @confirm="Confirm"
        ></u-modal>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                scaleValue: 1,
                details: '',
                id: '',
                type_config: [],
                site_config: '',
                site_location: [],
                selectArr: [],
                Disabled: true,
                priceObj: '',
                show: false,
                shiftImg: 'https://msraimgcdn.mogoie.com/6166/1753781354739.gif'
            };
        },
        onLoad(opt) {
            if (opt.id) this.id = opt.id;
            this.getSiteTimeDetail();
        },

        methods: {
            getSiteTimeDetail() {
                this.$showLoading('');
                this.$http
                    .get({
                        url: '/SiteApi/getSiteTimeDetail',
                        data: {
                            id: this.id
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        const Result = res.data;
                        this.details = Result;
                        this.site_config = Result.site_config;
                        Result.site_location.forEach((item) => {
                            item.width = Math.round(Number(Result.site_config.width) * 0.84);
                            item.height = Math.round(Number(Result.site_config.height) * 0.84);
                            item.x = Math.round(Number(item.x) * 0.84);
                            item.y = Math.round(Number(item.y) * 0.84);

                            let userItem = Result.type_config.find((n) => n.id == item.site_type);
                            if (userItem) {
                                item.empty_log = userItem.empty_log;
                                item.choose_log = userItem.choose_log;
                                item.order_log = userItem.order_log;
                                item.type_name = userItem.type_name;
                            }
                        });
                        this.site_location = Result.site_location;
                        this.type_config = Result.type_config || [];
                    });
            },
            selectTab(item) {
                if (this.scaleValue == 1) this.scaleValue = 1.5;
                if (item.order_state == 1) return this.$Toast('该座位已被预约，请重新选择');
                if (item.order_state == 2) return;
                if (item.tel == 1) return (this.show = true);
                const Flag = this.containsObjectWithData(this.selectArr, 'id', item.id);
                const Index = this.site_location.findIndex((n) => n.id == item.id);
                if (Flag) {
                    const selectIndex = this.selectArr.findIndex((n) => n.id == item.id);
                    this.selectArr.splice(selectIndex, 1);
                    this.site_location[Index].select = 0;
                } else {
                    this.selectArr.push(item);
                    this.site_location[Index].select = 1;
                }
                if (this.selectArr.length) this.getSitePriceInfo();
            },

            getSitePriceInfo() {
                let site_ids = [];
                this.selectArr.forEach((item) => {
                    site_ids.push(item.id);
                });
                this.$http
                    .get({
                        url: '/SiteApi/getSitePriceInfo',
                        data: {
                            site_id: site_ids.join(','),
                            time_id: this.id
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const Result = res.data;
                        this.priceObj = Result;
                    });
            },

            chooseSite() {
                if (!this.selectArr.length) return;
                this.$showLoading('座位锁定中~');
                let site_ids = [];
                this.selectArr.forEach((item) => {
                    site_ids.push(item.id);
                });
                this.$http
                    .post({
                        url: '/SiteApi/chooseSite',
                        data: {
                            site_id: site_ids.join(','),
                            time_id: this.id
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        if (res.data) this.toUrl(`orderDetails?order_id=${res.data}`);
                    });
            },

            scaleView(e) {
                const scale = e.detail.scale;
                scale > 1 ? (this.Disabled = false) : (this.Disabled = true);
            },
            Scroll(e) {
                // console.log(e,'1');
            },

            containsObjectWithData(objects, key, value) {
                return objects.some((obj) => obj[key] === value);
            },

            Confirm() {
                this.$common.Tel(this.site_config.tel);
            }
        },

        computed: {
            bgImgHeight() {
                if (!this.site_config) return;
                return Math.round(Number(this.site_config.img_h) * 0.84);
                // return Math.round(Number(this.site_config.img_h) * 0.81);
            }
        },
        watch: {
            scaleValue(newVal, oldVal) {
                if (newVal && newVal > 1) {
                    this.Disabled = false;
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
    .content {
        width: 100%;
        height: 100vh;
        box-sizing: border-box;
        background-size: cover;
        background-position: center;
        padding: 50rpx 0 200rpx 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background-color: #4a3721;
        position: relative;
        .shiftImg {
            width: 750rpx;
            height: 750rpx;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
    }

    .Box {
        width: 690rpx;
        height: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        background-size: 100% 100%;
        background-position: center;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
    }

    .scrollView {
        width: 630rpx;
        // width: 540rpx;
        margin: 230rpx auto 0;
        z-index: 9999;
    }

    .Tanine {
        width: 100%;
    }

    .Tanine_in {
        width: 100%;
        height: 1000rpx;
    }

    .movable-area {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        position: relative;
        z-index: 8988;
    }

    .movable-view {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

    .list {
        position: absolute;
        z-index: 10;
    }

    .list_img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .boxBgimg {
        width: 750rpx;
        height: 1349rpx;
    }

    // .boxBgimg{
    // 	width:750rpx;
    // 	height:1349rpx;
    // }

    .box_Tip {
        width: 550rpx;
        // height: 20%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .type_config {
        width: 25%;
        margin-top: 10rpx;
        display: flex;
        justify-content: center;
    }

    .type_config_log {
        width: 28rpx;
        height: 28rpx;
        display: inline-block;
    }

    .type_config_name {
        font-size: 22rpx;
        margin-left: 4rpx;
        display: inline-block;
    }

    .footer {
        width: 700rpx;
        position: fixed;
        bottom: 0;
        left: 30rpx;
        z-index: 1000;
        padding: 30rpx 20rpx;
        background-color: #f6f0e0;
        border-radius: 20rpx 20rpx 0 0;
        border: 4rpx solid #eee3ca;
        border-bottom: none;
        display: flex;
        flex-direction: column;
    }

    .details {
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        // align-items: center;
        color: #000;
    }

    .details_txt {
        font-size: 26rpx;
        color: #666;
        display: inline-block;
    }

    .open_time {
        padding: 0 8rpx;
    }

    .Make_btn {
        width: 100%;
        height: 70rpx;
        background-color: #275e58;
        color: #f6f0e0;
        font-size: 26rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30rpx;
        border-radius: 10rpx;
    }

    .tableList {
        background-color: #eccb95;
        padding: 4rpx 16rpx;
        border-radius: 6rpx;
        margin-right: 10rpx;
        display: inline-block;
    }

    .tableList_name {
        color: #000;
        font-size: 22rpx;
    }

    .Givemoney {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 30rpx;
    }

    .MoneyBox {
        display: flex;
        flex-direction: column;
    }

    .Earnest {
        color: #333;
        font-size: 22rpx;
        margin-right: 4rpx;
    }

    .EarnestMoney {
        color: #275e58;
        font-size: 34rpx;
        font-weight: bold;
    }

    .Copewith {
        color: #333;
        font-size: 22rpx;
        margin-right: 4rpx;
    }

    .CopewithMoney {
        color: #000;
        font-size: 28rpx;
        font-weight: bold;
    }

    .continum {
        width: 260rpx;
        height: 70rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        color: #f6f0e0;
        border-radius: 35rpx;
        background-color: #275e58;
        // border: 4rpx solid #a17e4f;
    }
</style>
